<template>
  <view class="box">


    <view class="top-box">
      <view>Hi</view>
      <view class="next-text">欢迎使用！</view>
    </view>
    <!-- 登录、注册 -->
    <view class="center-box">
      <view class="nav">
        <view :class="['left', {'select': current === 1}]" @click="clickLogin">
          <text>登录</text>
        </view>
        <view :class="['right', {'select': current === 0}]" @click="clickReg">
          <text>注册</text>
        </view>
      </view>
      <!-- 登录 -->
      <view class="input-box" v-show="current === 1">
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入用户名" v-model="username">

        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请输入登录密码" v-model="password">
        </view>
        <view class="forget">
          <text class="link-text" @click="navigateToForgetPage">忘记密码?</text>
        </view>
        <view>
          <view class="business" @click="navigateToBusinessPage">
            <text>您是商家/成为车界大亨！</text>
          </view>
        </view>
      </view>
      <!-- 注册 -->
      <view class="input-box" v-show="current === 0">
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入用户名" v-model="userinfo.userName" />
        </view>
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入手机号" v-model="userinfo.userTel" />
        </view>
        <!-- <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入验证码" v-model="code" />
          <text class="input-code" @click="getCode">{{codeText}}</text>
        </view> -->
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入身份证" v-model="userinfo.userSFZ" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请输入密码" v-model="userinfo.userPassword" />
        </view>
        <view class="wei-input">
          <icon type="success" color="#44ADFB" size="16"></icon>
          <input class="input" type="password" auto-focus placeholder="请确认密码" v-model="userinfo.confirmUserPassword" />
        </view>
        <view class="wei-input">
          <icon type="waiting" color="#44ADFB" size="16"></icon>
          <input class="input" auto-focus placeholder="请输入性别" v-model="userinfo.userSex" />
        </view>

        <!-- <view class="sex">
				    <radio-group v-model="userinfo.userSex">
				      <radio :value="'男'" :checked="userinfo.userSex == '男'">男</radio>
				      <radio :value="'女'" :checked="userinfo.userSex == '女'">女</radio>
				    </radio-group>
					<text>所选性别: {{ userinfo.userSex }}</text>
				  </view> -->

      </view>
      <view class="sumbit-btn">
        <button class="button" @click="userLogin" style="background-color: #33ccff;font-size: 30rpx;"
          type="primary">立即{{current==1?'登录':'注册'}}</button>
      </view>
    </view>
    <!-- 重影 -->
    <view class="shadow shadow-1"></view>
    <view class="shadow shadow-2"></view>
    <!-- 说明 -->
    <view class="bottom-box">
      关注文义喵~关注文义谢谢喵！
    </view>
  </view>
</template>

<script>
  import store from '../../store/index.js' //需要引入store
  // import {
  //   mapMutations,
  //   mapState,
  //   mapGetters
  // } from 'vuex'
  export default {
    data() {
      return {
        current: 1,
        codeText: '获取验证码',
        counting: false,
        username: '',
        password: '',
        code: '',
        userinfo: {
          userTel: '',
          userSFZ: '',
          userName: '',
          userPassword: '',
          confirmUserPassword: '',
          userSex: '',
        },
      }
    },
    // computed: { ...mapState(['user']), },
    methods: {
      // ...mapMutations(['loginUser']),

      // 登陆注册选项卡监听
      clickLogin() {
        this.current = 1
      },
      clickReg() {
        this.current = 0
      },
      // 页面跳转功能
      navigateToForgetPage() {
        uni.navigateTo({ url: '/pages/forget/forget' })
      },
      navigateToBusinessPage() {
        uni.navigateTo({ url: '/pages/busiLogin/busiLogin' })
      },

      // 用户登陆or注册
      userLogin() {
        // 登陆
        if (this.current === 1) {
          uni.request({
            url: 'http://localhost:3007/api/login',
            method: 'POST',
            header: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: {
              username: this.username,
              password: this.password,
            },
            success: res => {
              // 登陆成功
              if (res.data.status === 0) {
                console.log('token:', res.data.token)
                console.log('res', res)
                // 登录成功后将user信息存储到state中
                // this.loginUser(res.data.data.user)
                store.commit('loginUser', res.data.data.user)
                store.commit('updatetToken', res.data.token)
                console.log('登陆成功:' + res.data.token)
                // 测试
                console.log('user:', store.state.user)
                // 跳转
                // uni.navigateTo({ url: '/subpkg/adminIndex/adminIndex' })
                uni.switchTab({ url: '/pages/home/home' })
              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({ title: '网络请求失败' })
            }

          })
        }
        // 注册
        if (this.current === 0) {
          uni.request({
            url: 'http://localhost:3007/api/reguser',
            method: 'POST',
            header: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: {
              userTel: this.userinfo.userTel,
              SFZ: this.userinfo.userSFZ,
              password: this.userinfo.userPassword,
              username: this.userinfo.userName,
              sex: this.userinfo.userSex,
            },
            success: res => {
              console.log(res)
              console.log(this.userinfo)
              // 确认密码
              if (this.userinfo.userPassword != this.userinfo.confirmUserPassword) {
                uni.showToast({
                  title: '两次密码不一致',
                  icon: 'none',
                })
              }
              // 注册成功
              else if (res.data.status === 0) {
                uni.navigateTo({ url: '/pages/userLogin/userLogin' })
              } else {
                uni.showToast({
                  title: res.data.message,
                  icon: 'none',
                })
              }
            },
            fail: error => {
              console.error(error)
              uni.showToast({ title: '网络请求失败' })
            }

          })
        }
      },

      // 获取验证码
      getCode() {
        console.log(this.counting)
        if (!this.counting) {
          uni.showToast({ title: '验证码已发送', })
          //开始倒计时60秒
          this.countDown(60)
        }
      },
      //倒计时60秒
      countDown(count) {
        if (count === 0) {
          this.codeText = '获取验证码'
          this.counting = false
          return
        }
        this.counting = true
        this.codeText = count + '秒后重新获取'
        setTimeout(() => {
          count--
          this.countDown(count)
        }, 1000)
      },
    },

    // 通过判断token是否有无，控制页面的跳转
    onBackPress(options) {
      // console.log('from:' + options.from)
      // return false
      const token = store.state.token
      // console.log(qwe)
      console.log('退出token：' + token)
      if (token === '') {
        // uni.navigateTo({ url: '/pages/userLogin/userLogin' })
        return true
      }
    },

  }
</script>

<style lang="scss">
  page {
    height: 100%;
    background-color: white;
    margin: 0px;
    padding: 0px;
  }

  .box {
    // margin-top: 15%;
  }

  /* 顶部背景 */
  .top-box {
    height: 30%;
    background-image: linear-gradient(#44ADFB, #5ed6fd);
    padding: 30rpx;
    color: white;
    font-weight: bold;
  }

  .next-text {
    margin-top: 15rpx;
  }

  /* 内容 */
  .center-box {
    background-color: white;
    margin: 20% 20rpx 0rpx 20rpx;
    padding: 25rpx;
    border-radius: 15rpx;
    -webkit-filter: drop-shadow(0 0 8rpx #44ADFB);
    filter: drop-shadow(0 0 8rpx #44ADFB);
  }

  /* 导航 */
  .nav {
    display: flex;
    text-align: center;
    font-size: 32rpx;
    margin-bottom: 8%;
  }

  .left {
    flex: 1;
    font-weight: bold;
  }

  .right {
    flex: 1;
    font-weight: bold;
  }

  .select {
    font-weight: bold;
    color: #33ccff;
  }

  .select text {
    padding-bottom: 5rpx;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    border-bottom: 5rpx solid #33ccff;
  }

  .wei-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }

  // .sex {
  // 	margin-top: 35rpx;
  // 	text-align: center;
  // }

  .input-box {
    margin: 20rpx;
  }

  .input {
    padding-left: 20rpx;
    font-size: 30rpx;
  }

  .input-code {
    position: absolute;
    right: 40rpx;
    font-size: 26rpx;
    padding: 10rpx 15rpx;
    color: white;
    background-color: #FF8C69;
    border-radius: 10rpx;
  }

  .forget {
    font-size: 26rpx;
    color: #33ccff;
    margin-top: 20rpx;
    text-align: right;
  }

  .business {
    font-size: 26rpx;
    color: #33ccff;
    margin-top: -32rpx;
    text-align: left;
  }

  .sumbit-btn {
    margin: 6% 30rpx 30rpx 30rpx;
  }

  /* 重影 */
  .shadow {
    box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
    border-radius: 25rpx;
    background-color: white;
  }

  .shadow-1 {
    height: 40rpx;
    margin: -20rpx 50rpx 0 50rpx;
  }

  .shadow-2 {
    position: relative;
    z-index: -888;
    height: 50rpx;
    margin: -30rpx 80rpx 0 80rpx;
  }

  /* 最底部 */
  .bottom-box {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    font-size: 24rpx;
    color: gray;
    display: flex;
    justify-content: center;
  }
</style>